<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/iframe.css"/>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<script src="./lib/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<div id="detil">
			<div class="detil-img">
				<img src="http://118.178.140.168:8888/map/img/silhouette.jpg">
			</div>
			<div class="detail__table">
				<p class="detail__title">影像详情</p>
				<ul>
					<li><span  class="detail-label">卫星：</span><span class="detail-value">GF6</span></li>
					<li><span  class="detail-label">传感器：</span><span class="detail-value">PMS</span></li>
					<li><span  class="detail-label">采集时间：</span><span class="detail-value">2020-10-11</span></li>
					<li><span  class="detail-label">云量：</span><span class="detail-value">3.00%</span></li>
					<li><span  class="detail-label">分辨率：</span><span class="detail-value">2M</span></li>
					<li><span class="detail-label">轨道圈号：</span><span class="detail-value">14180</span></li>
					<li><span class="detail-label">景Path/Row：</span><span class="detail-value">596/81</span></li>
					<li><span class="detail-label">产品号：</span><span class="detail-value">1120042475</span></li>
					<li><span class="detail-label">左上角经/纬度：</span><span class="detail-value">118.852037,29.818297</span></li>
					<li><span class="detail-label">右上角经/纬度：</span><span class="detail-value">119.990566,29.539408</span></li>
					<li><span class="detail-label">右下角经/纬度：</span><span class="detail-value">119.749672,28.697317</span></li>
					<li><span class="detail-label">左下角经/纬度：</span><span class="detail-value">118.620000,28.974521</span></li>
				</ul>
			</div>
		</div>    
		<script>
			$(function(){
				loadData();				
	
				// 渲染加载数据
				function loadData(){
					var localData = getData();
					var todoCount = 0;
					var doneCount = 0;
					$("ol").empty();
					$("ul").empty();
					$.each(localData,function(i,n){
						if(n.done){
							$("ul").prepend("<li><input type='checkbox' checked='1'> <p>"+n.title+"</p> <a href='javascript:;' id="+i+"></a></li>");
							doneCount++;
						}
						else{
							$("ol").prepend("<li><input type='checkbox'> <p>"+n.title+"</p> <a href='javascript:;' id="+i+"></a></li>");
							todoCount++;
						}
					});
					$("#donecount").text(doneCount);
					$("#todocount").text(todoCount);
				}
	
				// 读取本地存储数据
				function getData(){
					var data = localStorage.getItem("todol");
					if(data !== null){
						return JSON.parse(data);
					}else{
						return [];
					}
				}
				// 保存本地数据到 localStorage
				function saveData(data){
					localStorage.setItem("todol",JSON.stringify(data));
				}
				// JSON.parse, JSON.stringify
			});// 入口函数
	
		</script>
	</body>
</html>
